<template>
  <!-- 搜索 -->
  <view class="search" :class="{ focused: focused }">
    <!-- 搜索框 -->
    <view class="input-wrap" @click="goSearch">
      <input v-model="query" @input="searchQuery" @confirm="addHistory" type="text" :placeholder="placeholder" />
      <text class="cancel" @click.stop="cancleSearch">取消</text>
    </view>
    <!-- 搜索结果 -->
    <view class="content">
      <view class="title">
        搜索历史
        <text class="clear" @click="removeHistory"></text>
      </view>
      <view class="history">
        <navigator v-for="item in queryHistory" :key="item" :url="`/subpkg/pages/list/index?query=${item}`">
          {{ item }}
        </navigator>
      </view>
      <!-- 结果 -->
      <scroll-view scroll-y class="result" v-if="searchList.length > 0">
        <navigator
          v-for="item in searchList"
          :key="item.goods_id"
          :url="`/subpkg/pages/goods/index?id=${item.goods_id}`"
        >
          {{ item.goods_name }}
        </navigator>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// 搜索功能
// 1. 获取搜索关键字
// 2. 掉接口获取数据
// 3. 防抖处理
// 4. 搜索历史 (手机点击键盘的回车或者搜索触发 confirm)
// 5. 本地存储
// 6. 清空历史
import { debounce } from 'lodash';
export default {
  data() {
    return {
      focused: false,
      placeholder: '',
      query: '',
      // 搜索接口
      searchList: [],
      queryHistory: uni.getStorageSync('history') || []
    };
  },
  methods: {
    goSearch(ev) {
      // 显示搜索层
      this.focused = true;
      this.placeholder = '请输入您要搜索的内容';

      // 触发父组件自定义事件
      this.$emit('search', {
        pageHeight: uni.getSystemInfoSync().windowHeight
      });

      // 隐藏tabBar
      uni.hideTabBar();
    },
    cancleSearch() {
      // 隐藏搜索层
      this.focused = false;
      this.placeholder = '';

      // 触发父组件自定义事件
      this.$emit('search', {
        pageHeight: 'auto'
      });

      // 显示tabBar
      uni.showTabBar();
    },
    searchQuery: debounce(async function () {
      console.log('搜索');
      if (this.query.trim().length == 0) return (this.searchList = []);
      const { data } = await uni.$http.get('/api/public/v1/goods/qsearch', {
        query: this.query
      });
      if (data.meta.status !== 200) return uni.$showToast();
      this.searchList = data.message;
      console.log(this.searchList);
    }, 500),
    // 添加历史记录
    addHistory() {
      if (this.query.trim().length == 0) return;
      // 判断历史记录中有没有query 有的话就不加了 没有才加到数组中
      if (this.queryHistory.includes(this.query)) return;
      this.queryHistory.push(this.query);
      uni.setStorageSync('history', this.queryHistory);
    },
    // 清空历史记录
    removeHistory() {
      uni.removeStorageSync('history');
      this.queryHistory = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  flex-direction: column;

  // 搜索框
  .input-wrap {
    display: flex;
    height: 100rpx;
    padding: 20rpx 30rpx;
    background-color: #ea4451;
    box-sizing: border-box;
    position: relative;

    &::before,
    &::after {
      height: 44rpx;
      line-height: 1;
      background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;

      position: absolute;
      top: 28rpx;
      z-index: 9;
    }

    &::before {
      content: '搜索';
      display: block;

      width: 100rpx;
      padding: 11rpx 0 10rpx 44rpx;
      box-sizing: border-box;
      color: #666;
      font-size: 24rpx;
      left: 325rpx;
    }

    &::after {
      display: none;
      content: '';
      width: 44rpx;
      left: 40rpx;
    }

    input {
      flex: 1;
      height: 60rpx;
      padding: 0 20rpx 0 64rpx;
      background-color: #fff;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #666;
    }

    text.cancel {
      display: none;
      width: 80rpx;
      text-align: right;
      line-height: 60rpx;
      font-size: 27rpx;
      color: #666;
    }
  }

  // 搜索结果
  .content {
    display: none;
    flex: 1;
    padding: 27rpx;
    background-color: #fff;
    position: relative;

    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }

    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;

      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      // display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;

      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  // 获得焦点状态
  &.focused {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;

    .input-wrap {
      background-color: #eee;

      &::before {
        display: none;
      }

      &::after {
        display: block;
      }
    }

    text.cancel {
      display: block;
    }

    .content {
      display: block;
    }
  }
}
</style>
